<template>
  <div class="finished-product">
    <div class="header-breadcrumb">
      <Breadcrumb :headerTitle="headerTitle" />
    </div>
    <div class="finished-product-content">
      <!-- 左侧分类 -->
      <div class="collect-box-classify">
        <div class="collect-box-classify-title">
          <div
            v-for="(classify, index) in collectClassify"
            :key="index"
            :class="[
              'collect-box-classify-title-name',
              finishedProductClassifyIndex == classify.id
                ? 'collect-box-classify-title-name-active'
                : '',
            ]"
            @click="onFinishedProductClassifyTitle(classify)"
          >
            {{ classify.title }}
          </div>
        </div>
        <!-- 我的产品 -->
        <div
          class="collect-box-classify-product"
          v-if="finishedProductClassifyIndex == 1"
        >
          <el-menu unique-opened class="el-menu-vertical-demo">
            <el-submenu
              :index="productCalssify.usper_title"
              v-for="(productCalssify, productIdx) in productCalssifyData"
              :key="productIdx"
            >
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>{{ productCalssify.usper_title }}</span>
              </template>
              <el-menu-item-group
                v-for="(classifyChild, calssifyIdx) in productCalssify.children"
                :key="calssifyIdx"
              >
                <template v-if="classifyChild.children">
                  <el-submenu :index="classifyChild.usper_title">
                    <template slot="title">{{
                      classifyChild.usper_title
                    }}</template>

                    <el-menu-item
                      :index="children.usper_title"
                      v-for="(children, index) in classifyChild.children"
                      :key="index"
                      @click="onProductClassify(children)"
                      >{{ children.usper_title }}</el-menu-item
                    >
                  </el-submenu>
                </template>
                <template v-else>
                  <el-menu-item
                    :index="classifyChild.usper_title"
                    @click="onProductClassify(classifyChild)"
                    >{{ classifyChild.usper_title }}</el-menu-item
                  >
                </template>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
        <!-- 我的素材 -->
        <div
          class="collect-box-classify-material"
          v-else-if="finishedProductClassifyIndex == 2"
        >
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <!-- 主要内容 -->
      <div class="finished-product-box">
        <RecordChild :productId="productClassifyId" />
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb';
import RecordChild from './record.vue';
import Finish from '@/api/finish';

export default {
  name: 'finishedProduct',
  components: { Breadcrumb, RecordChild },
  props: {},
  data() {
    return {
      headerTitle: ['定制产品', '成品管理'],
      collectClassify: [
        { title: '产品分类', id: 1 },
        { title: '自定义分组', id: 2 },
      ],
      finishedProductClassifyIndex: 1,
      productCalssifyData: [], // 我的产品分类
      productClassifyId: '', // 我的产品分类id
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getFinishCategories();
  },
  methods: {
    onFinishedProductClassifyTitle(item) {
      this.finishedProductClassifyIndex = item.id;
    },

    // 获取分类列表
    getFinishCategories() {
      const that = this;
      Finish.getFinishCategories().then((res) => {
        console.log(res);
        if (res.code == 200) {
          that.productCalssifyData = res.data;
        }
      });
    },

    // 产品分类点击事件
    onProductClassify(item) {
      this.productClassifyId = item.id.toString();
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.el-menu-item {
  min-width: unset;
}

.el-menu-vertical-demo {
  border-right: unset;
}

.finished-product {
  .finished-product-content {
    display: flex;

    // 左侧分类
    .collect-box-classify {
      margin-right: 24px;
      width: 180px;

      .collect-box-classify-title {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid #ebebeb;
        font-size: 16px;
        height: 50px;
        line-height: 50px;

        .collect-box-classify-title-name {
          cursor: pointer;
          border-bottom: 2px solid transparent;
        }
        .collect-box-classify-title-name-active {
          border-bottom: 2px solid #666;
          font-weight: 700;
        }
      }
    }

    .finished-product-box {
      flex: 1;
    }
  }
}
</style>
